<template>
  <Rheaders />
  <main>
    <h1>
      具有 <span>拟人化</span> 的问答，解决您头脑里的问题风暴
    </h1>

    <ul>
      <li v-for="item, index in pre" :key="index" @click="input = item">
        {{ item }}
      </li>
    </ul>

    <footer>
      <button class="new" @click="input = undefined">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="w-4 h-4">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99">
          </path>
        </svg>
      </button>

      <div class="input">
        <textarea v-model="input" rows="1"></textarea>
        <button>
          <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
            stroke-linejoin="round" class="h-4 w-4 mr-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
            <line x1="22" y1="2" x2="11" y2="13"></line>
            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
          </svg>
        </button>
      </div>
    </footer>
  </main>
</template>

<script type="text/javascript">
import Rheaders from "./Rheaders.vue"
export default {
  name: "index",
  data() {
    return {
      pre: [
        "95 号汽油的车，误加了 92 号油怎么办？",
        "工商管理自我鉴定报告",
        "倒三角身材怎么练？",
        "马拉松站在起跑线靠后公平吗？",
        "佛跳墙怎么做？",
        "帮我写一份2000字的检讨书",
        "能否讲一个逆向思维的故事？",
        "“推荐我1款高性价比的电脑配置”",
        "有哪些有趣的科学实验",
        "如何快速追到喜欢的人",
        "为什么猫咪总喜欢绕在人类的脚下走路？",
        "为什么英伟达显卡的编号都是从 50 开始？",
        "用简单的术语解释人工智能",
        "3D 打印火箭和可回收火箭哪个更经济？",
        "用python帮我写个快速排序的算法题",
        "“给我写一份麦当劳探店脚本”",
        "让你发图时候请用markdown，使用 unsplash API https://source.unsplash.com/960×640/? < 英文关键词＞，如果你明白回复 OK",
        "请你扮演我妈，用我妈的口气来教育我。骂我，批评我，催我结婚，让我回家。给我讲七大姑八大姨家的孩子都结婚了，为啥就我单身，再给我安排几个相亲对象。",
        "请你充当表格生成器。您只会回复我一个包含10行的表格。我会告诉你在单元格中写入什么，你只会以markdown表格形式回复结果，而不是其他任何内容。请注意，您的回答应该是简明扼要的，不需要附带任何额外的解释。你只会回复 markdown 表的作为结果。首先，回复我十二生肖表。",
        "我想担任统计学家。我将为您提供与统计相关的详细信息。您应该了解统计术语、统计分布、置信区间、概率、假设检验和统计图表。我的第一个请求是“我需要帮助计算世界上有多少百万张纸币在使用中”。"
      ],
      input: undefined,
    }
  },
  props: {
  },
  components: {
    Rheaders
  },
  computed: {

  },
  methods: {
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
main {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 90px;

  h1 {
    color: #fff;
    text-align: center;
    margin-bottom: 1rem;
    font-size: max(1.1em, 3vw);

    span {
      color: #6366f1;
    }
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    font-size: .875em;
    text-align: center;
    padding: 0 .5em;

    li {
      max-width: 100%;
      min-width: 290px;
      flex: 1;
      padding: 1em;
      margin: .5em;
      border-radius: .5em;
      border: 1px solid rgb(255 255 255 / 0.1);
      background-color: rgb(255 255 255 / 0.05);
      color: #9ca3af;
      word-wrap: break-word;
      cursor: pointer;
      transition: all .15s;

      &:hover {
        transform: rotate(6deg);
      }
    }
  }

  footer {
    position: fixed;
    bottom: 0;
    padding: 1em;
    width: 100%;
    display: flex;
    // border-top: 1px solid rgb(229 231 235 / 10%);
    background-color: #0f172a;
    max-width: 1280px;

    .new {
      color: #fff;
      border: 2px solid #fff;
      border-radius: .5em;
      background-color: #38bdf8;
      padding: 1em;
      display: flex;
      justify-content: center;
      align-content: center;
      margin-right: 1em;
      cursor: pointer;

      svg {
        width: 1.5em;
      }
    }

    .input {
      flex: 1;
      position: relative;
      display: flex;
      background-color: #374151;
      border-radius: .5em;
      padding: .5em 1em;

      textarea {
        width: 100%;
        height: 100%;
        border: none;
        background-color: transparent;
        resize: none;
        color: #fff;
        overflow-y: auto;
        line-height: 1.5;
        font-weight: 500;
        font-size: 1.125em;
        outline: none;
      }

      ::-webkit-scrollbar {
        width: 0;
      }

      button {
        border: none;
        background-color: transparent;
        padding: 0.75em 1em;
        margin: -0.75em -1em -0.75em 0;
        cursor: pointer;
        color: #6b7280;

        // &:hover {
        //   color: #9ca3af;
        //   background-color: #111827;
        // }

        svg {
          width: auto;
          height: 60%;
          margin-top: 6px;
        }
      }
    }
  }
}
</style>